<template>
    <div class="tkyx1">
        <div class="cover"></div>
        <div id="regBox">
                <ul>
                    <li class="zcb">
                        <div class="zjiao" @click="wxsmloin">
                            <img src="../../assets/numbern.png" alt="">
                            <!-- <img :src="" alt="" > -->
                            <!-- <loginRlist v-if="showWx"/> -->
                        </div>
                        <div class="zclogin">
                            <h3>扫描登录</h3>
                            <a href="#">免输入/更快/更安全</a>
                        </div>
                    </li>
                    <li class="towinlogin">
                        <div class="usListlogin yym">
                           <img src="../../assets/show.png" alt="">
                        </div>    
                    </li>
                </ul>
                <div class="btnboxlogn1">
                     <span>请用最新版</span>
                     <a href="#">孔网客服端</a>
                     <span>扫码</span>
                </div>
                <div class="spx"></div>
                <div class="finlogin">
                    <div class="fnlogin">
                        <span class="icon iconfont">&#xe607;</span>
                        <span class="wxlogin">微信</span>
                    </div>
                    <div class="fnlogin1">
                        <span class="icon iconfont">&#xe61a;</span>
                        <span class="wbo1">QQ</span>
                    </div>
                    <div class="fnlogin2">
                        <span class="icon iconfont">&#xe666;</span>
                        <span class="wbo2">微博</span>
                    </div>
                    <div class="sx">|</div>
                    <div class="zclogin1">
                        <a href="#">立即注册</a>
                       
                    </div>


                </div>
        </div>

    </div>

</template>

<script lang="ts">
import { defineComponent } from 'vue';
// import loginRlist from '@/header/loginRlist.vue'
export default defineComponent({
    data() {
        return {
            showWx:false,
            labelPosition: '',
            formLabelAlign: {
                pass: '',
                checkPass: '',
                type: '',
                code: ''

            }
        }
    },
    methods: {
        wxsmloin(){
            this.showWx=true
        }
    },
    components: {
        // loginRlist,

    },
})
</script>
<style lang="scss">
@font-face {
  font-family: 'iconfont';
  src: url('@/iconfont/iconfont.woff2?t=1663912146114') format('woff2'),
    url('@/iconfont/iconfont.woff?t=1663912146114') format('woff'),
    url('@/iconfont/iconfont.ttf?t=1663912146114') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 18px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>
<style lang="scss" scoped>
    .yym{
        margin-left: 119px;
    }
.cover {
    /*固定定位*/
    position: fixed;
    /*上下左右都为0*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*背景颜色*/
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
    // background-image: url(../../assets/260.jpg);
    // background-repeat: no-repeat;
    // background-size: 100%;
    /*模态框*/
    z-index: 99;
}

#regBox {
    background: #f7f7f6;
    width: 450px;
    /*固定定位*/
    position: fixed;
    /*从左往右占50%*/
    left: 50%;
    /*从上到下占50%*/
    top: 30%;
    /*模态框*/
    z-index: 100;
    /*从右往左移动*/
    margin-left: -200px;
    /*从下往上移动*/
    margin-top: -100px;

}

.zcb {
    height: 95px;
}

.zjiao {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 62px;
    height: 62px;
    // border: 1px solid red;
    overflow: hidden;

    >img {
        width: auto;
        height: auto;
        //如果图片比例不为一比一 则可以适当增加比例以满足充满盒子
        max-width: 100%;
        max-height: 100%;
    }

}

.zclogin {
    position: absolute;
    top: 9px;
    left: 46px;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    width: 341px;
    // height: 35px;


    >h3 {
        line-height: 35px;
        font-size: 30px;
        color: #666;
        font-weight: 500;
        overflow: hidden;
        margin-bottom: 10px;
    }

    >a {
        margin-top: 19px;
        display: inline-block;
        color: #999;
        cursor: pointer;
        font-size: 12px;
    }
}

.usListlogin{
    img{
    margin: 1px 35px 0px -2px
    }
   
    

}







.btnboxlogn1 {
    margin-left: 70px;
    width: 260px;
    height: 28px;
    text-align: center;
    line-height: 28px;
 span{
    color: #666;
    font-size: 12px;
    margin-right: 2px;
 } 
    a{
        margin-right: 2px;
        color: #9E100E;
        font-size: 12px;
    }
}
.finlogin{
    margin-left: 54px;
    width: 319px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .fnlogin{
        cursor: pointer;
        text-align: center;
        width: 70px;
        height: 23px;
        background-color: #77A877;
        border-radius: 3px;
      span{  
        line-height: 23px;
            font-size: 16px;
        }
        .wxlogin{
            margin-left: 4px;
            color: #fff;
            font-size: 13px;
        }
    }
    .fnlogin1{    
     .wbo1{
        font-size: 13px;
        color: #666;
        cursor: pointer
     }
     
    }
    .fnlogin2{
        cursor: pointer;
        .wbo2{
            margin-left: 4px;
            font-size: 13px;
            color: #666;
        }
    }
}
.sx{
    line-height: 20px;
    height: 29px;
    font-size: 12px;
}
.zclogin1{
    cursor: pointer;
    >a{
    color: #8c222c!important;
    font-size: 13px;
}
}
.spx{
    margin-top: 10px;
    margin-left: 43px;
    width: 353px;
    border-bottom: 1px solid #999;
    margin-bottom: 19px;
}

</style>